<script setup>
import { DEL_API, USER_PAGE_API } from '@/apis/usercrud';
import formatDateTime from '@/utils/formattime';
import { showMsg } from '@/utils/showMsg';
import { ElMessageBox } from 'element-plus';
import { onMounted, ref } from 'vue';

const ids = ref([])
const total = ref(0)
const pageList = ref([])
const pageNum = ref(1)
const pageSize = ref(10)
const fetchTable = async () => {
  const res = await USER_PAGE_API(pageNum.value, pageSize.value)
  total.value = res.data.total
  pageList.value = res.data.result.map(user => {
    return {
      ...user,
      createTime: formatDateTime(user.createTime),
      updateTime: formatDateTime(user.updateTime)
    }
  })
}
const handleDelete = (row) => {
  const _id = row.id || ids.value
  ElMessageBox.confirm('是否删除该用户？','Warning',{
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(()=>{
    DEL_API(_id).then(()=>{showMsg('删除成功','success');})
    fetchTable()
  }).catch(()=>{showMsg('已取消删除','info')})
}
const handlePageChange = (newPageNum) => {
  pageNum.value = newPageNum
  fetchTable()
}
const handleEdit = () => {}
onMounted(() => { fetchTable() })

</script>
<template>
  <el-card>
    <div class="table-header" style="margin-bottom: 10px;margin-left: 15px;">用户列表</div>
    <el-table :data="pageList" stripe style="width: 100%">
      <el-table-column prop="id" label="id" width="80" />
      <el-table-column prop="username" label="账号" width="300" />
      <el-table-column prop="createTime" label="创建时间" width="200" />
      <el-table-column prop="updateTime" label="更新时间" width="200" />
      <el-table-column prop="operation" label="操作" width="200">
        <template #default="scope">
          <el-button @click="handleEdit(scope.row)">修改</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- pagination -->
    <el-pagination background layout="prev, pager, next,jumper,total" :total="total" @current-change="handlePageChange" style="margin-top: 10px;"/>
  </el-card>
</template>
<style scoped>

</style>